import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';
import { ImageResponse } from '@vercel/og';
import React from 'react';

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  try {
    const trip = await prisma.trip.findUnique({
      where: { id: params.id },
      include: {
        activities: {
          orderBy: { date: 'asc' }
        }
      }
    });

    if (!trip) {
      return NextResponse.json({ error: '行程不存在' }, { status: 404 });
    }

    const activitiesHtml = trip.activities.map((activity, index) => (
      <div key={activity.id} style={{
        padding: '20px',
        backgroundColor: '#f7fafc',
        borderRadius: '12px',
        marginBottom: '16px',
      }}>
        <div style={{
          fontSize: '24px',
          fontWeight: 'bold',
          color: '#2d3748',
          marginBottom: '8px',
        }}>{index + 1}. {activity.title}</div>
        <div style={{
          fontSize: '18px',
          color: '#718096',
          marginBottom: '8px',
        }}>{format(new Date(activity.date), 'MM月dd日 HH:mm', { locale: zhCN })}</div>
        {activity.description && (
          <div style={{
            fontSize: '16px',
            color: '#4a5568',
          }}>{activity.description}</div>
        )}
      </div>
    ));

    return new ImageResponse(
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%',
        padding: '40px',
        backgroundColor: 'white',
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
      }}>
        <div style={{
          width: '100%',
          maxWidth: '800px',
        }}>
          <h1 style={{
            fontSize: '48px',
            fontWeight: 'bold',
            color: '#1a365d',
            textAlign: 'center',
            marginBottom: '24px',
          }}>{trip.title}</h1>

          <div style={{
            fontSize: '24px',
            color: '#4a5568',
            textAlign: 'center',
            marginBottom: '32px',
          }}>
            {format(new Date(trip.startDate), 'yyyy年MM月dd日', { locale: zhCN })} - 
            {format(new Date(trip.endDate), 'yyyy年MM月dd日', { locale: zhCN })}
            <br />
            共 {trip.activities.length} 个活动
          </div>

          <div style={{
            display: 'flex',
            flexDirection: 'column',
          }}>
            {activitiesHtml}
          </div>

          <div style={{
            marginTop: '32px',
            textAlign: 'center',
            fontSize: '14px',
            color: '#a0aec0',
          }}>由 Travel Planner 生成</div>
        </div>
      </div>,
      {
        width: 1200,
        height: 1600,
      }
    );
  } catch (error) {
    console.error('Generate poster error:', error);
    return NextResponse.json(
      { error: '生成海报失败' },
      { status: 500 }
    );
  }
} 